<template>
    <div>
      <van-tabs v-model="active" title-inactive-color="#999999" :title-active-color="mallActive==='#f44'?'#000':'#999999'" :color="mallActive" swipeable @click="changeTabs">
        <van-tab v-for="(list,index) in tabsClassList" :key="index"
                 :title="(lang==='cn')?list.name:list.name_en" :swipe-threshold="swipeThreshold">
          <div>
            <product-swipe :swipeInfo="swipe" :srceenWidth="srceenWidth"/>
          </div>
          <div class="product_content">
            <mall-product v-if="isMallProductVisible()" v-for="(productList,index1) in products" :key="index1"
                          :direction="((index1%2)===0)?'left':'right'"
                          :isNew="(index1<2)?true:false"
                          :productInfo="productList" :productWidth="mall_productWidth"></mall-product>
            <null-page v-if="isNULL" />
          </div>
          <load-more v-if="!isNULL" :loadMoreInfo="mallProductList" :categoryId="parseInt(nowCategoryId)"/>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
  import MallProduct from '@/components/mall/Mall_Product'
  import productSwipe from '@/components/mall/productSwipe'
  import LoadMore from '@/components/mall/LoadMore'
  import NullPage from '@/components/mall/nullPage'
  export default {
      name: "MallIndex",
    computed:{
        mallActive:{
          get(){
            return this.$store.getters.getMallActiveId;
          },
          set(){}
        },
        isNULL:{
          get(){
            return this.$store.getters.getIsNull;
          },
          set(){}
        },
      products:{
        get(){
          return this.$store.getters.getMallProducts;
        },
        set(){}
      },
      nowCategoryId:{
        get(){
          let storageData = window.sessionStorage.getItem('nowMallCategoryId');
          if(storageData==='null'&&this.$store.getters.getNowMallCategoryId!==storageData){                    //对比sessionStorage中的数据
            this.$store.dispatch('toChangeNowMallCategoryId', storageData);
          }
          return this.$store.getters.getNowMallCategoryId;
        },
        set(){}
      },
      mallProductList:{
        get(){
          let storageData = window.sessionStorage.getItem('mallProductList');
          if( this.$store.getters.getMallProductList!==storageData&&storageData!=='null'){                    //对比sessionStorage中的数据
            return this.$store.getters.getMallProductList;
          }
          this.$store.dispatch('toChangeMallProductList', storageData);        //同步操作
          return this.$store.getters.getMallProductList;
        },
        set(){}
      },
      swipe:{
        get(){
          let storageData = window.sessionStorage.getItem('mallSwipe');
          if(typeof (storageData) ==='string'){
            return this.$store.getters.getMallSwipe;
          }else{
            this.$store.dispatch('toChangeMallSwipe', storageData);
            return this.$store.getters.getMallSwipe;
          }

        },
        set(){}
      },
      lang:{
        get(){
          let storageData = window.sessionStorage.getItem('lang');
          if(this.$store.state.lang!==storageData&&storageData!=='null'){
            this.$store.dispatch('toChangeLang', storageData);    //同步操作
          }
          return this.$store.getters.getLang;
        },
        set(){}
      },
      tabsClassList:{
        get(){
          return this.$store.getters.getProductCategory.list;
        },
        set(){}
      },
    },
    methods:{
      changeTabs(index){
        this.$store.dispatch('toChangeMallActive','#f44');
        this.$store.dispatch('toChangeNowMallCategoryId',this.tabsClassList[index].id);
        //let search=this.$store.getters.getSearchContent;
        this.$store.commit('changeSearchContent','');
        this.getProductClass(this.tabsClassList[index].id);
      },
      isMallProductVisible(){
        if(this.$store.getters.getMallProductList === undefined||this.$store.getters.getMallProductList===null||this.$store.getters.getMallProductList==='null') {
          return false;
        }
        return true;
      },
      getText:function(text){
        let str='productClass.'+text;
        return this.$t(str);
      },
      getScreen:function(){
        this.srceenWidth=document.body.clientWidth;
        this.tabWidth=this.srceenWidth/6;
        this.mall_productWidth=(this.srceenWidth-30)/2;
      },
      getProductCategoryIndex(array,id){
        for(let i=0;i<array.length;i++){
          if(array[i].id==id){
            this.active=i;
            break;
          }
        }
      },
      getProductCategory(){
        let _this=this;
        this.$store.dispatch('toChangeLoadIngVisible',true);
        let nowCategoryIdTemp=0;   //获取当前商品分类的id,避免刷新后重新获取信息
        let storageData = window.sessionStorage.getItem('nowMallCategoryId');
        if(this.$store.state.getNowMallCategoryId!==storageData&&storageData!=='null'){
          this.$store.dispatch('toChangeNowMallCategoryId', storageData);    //同步操作
        }
        nowCategoryIdTemp = this.$store.getters.getNowMallCategoryId;
          this.axios.get(domain.url + 'product/Api/get_product_category')
            .then(function (response) {
              //产品分类信息
              _this.$store.dispatch('toChangeProductCategory', response.data);
              if (nowCategoryIdTemp === undefined || nowCategoryIdTemp === null || nowCategoryIdTemp === 'null') {
                nowCategoryIdTemp = parseInt(response.data.list[0].id);
              }
              _this.changeCurrentPageText('/MallIndex');
              _this.getProductCategoryIndex(response.data.list,nowCategoryIdTemp);
              //nowCategoryIdTemp
              if(nowCategoryIdTemp==-1){
                nowCategoryIdTemp='';
                _this.$store.commit('changeMallActive','#FFF')
              }
              _this.getProductClass(nowCategoryIdTemp,_this.$store.getters.getSearchContent);
              _this.$store.dispatch('toChangeLoadIngVisible',false);
            })
            .catch(function (error) {
              console.log(error);
            });
        //获取轮播图
        this.axios.get(domain.url+'banner/api/get_banner', {
          params: {
            language: _this.lang,
            equipment: 'mobile'
          }
        })
          .then(function (response) {
            _this.$store.dispatch('toChangeMallSwipe',response.data.list);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      changeCurrentPageText(route){
        //显示当前页
        let lang=this.lang;
        if(route==='/MallIndex'){
          if(lang==='en'){
            this.$store.dispatch('toChangeCurrentPageText','mall');
          }else{
            this.$store.dispatch('toChangeCurrentPageText','商城');
          }
        }
        if(route==='/brandIndex'){
          if(lang==='en'){
            this.$store.dispatch('toChangeCurrentPageText','brand');
          }else{
            this.$store.dispatch('toChangeCurrentPageText','品牌');
          }
        }
        if(route==='/CompanyProfileIndex'){
          if(lang==='en'){
            this.$store.dispatch('toChangeCurrentPageText','company profileIndex');
          }else{
            this.$store.dispatch('toChangeCurrentPageText','公司介绍');
          }
        }
        if(route==='/theNewsList'){
          if(lang==='en'){
            this.$store.dispatch('toChangeCurrentPageText','news list');
          }else{
            this.$store.dispatch('toChangeCurrentPageText','新闻');
          }
        }
        if(route==='/NewsDetails'){
          if(lang==='en'){
            this.$store.dispatch('toChangeCurrentPageText','news details');
          }else{
            this.$store.dispatch('toChangeCurrentPageText','新闻详情');
          }
        }
      },
      getProductClass(nowCategoryID,search){
        //获取分类下的产品
        this.$store.dispatch('toChangeLoadIngVisible',true);
        let _this=this;
        this.axios.get(domain.url+'product/api/get_product_list', {
          params: {
            language: _this.lang,
            page:1,
            limit:6,
            category_id:nowCategoryID,
            search:search,
          }
        })
          .then(function (response) {
           //分类下的产品
            if(response.data.list.data.length<1){
              _this.$store.dispatch('toChangeIsNull',true);
            }
            else{
              _this.$store.dispatch('toChangeIsNull',false);
            }
            _this.$store.dispatch('toChangeMallProducts',response.data.list.data);
            _this.$store.dispatch('toChangeMallProductList',response.data.list);
            _this.$store.dispatch('toChangeLoadIngVisible',false);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    components: {
      MallProduct:MallProduct,
      productSwipe:productSwipe,
      LoadMore:LoadMore,
      NullPage:NullPage
    },
      data() {
        return {
          swipeThreshold:6,
          showNumOfProduct:6,
          mall_productWidth:0,
          srceenWidth:0,
          tabWidth:0,
          active:0,
        }
      },
      mounted(){
        this.getScreen();
        this.getProductCategory();
      }
    }
</script>

<style scoped>
  .van-tabs{
    width:100%;
  }
  .van-tab{
    font-size:10px;
  }
  .product_content{
    overflow: auto;
    background: #f5f5f5;
    overflow: hidden;
  }
</style>
